<template>
        <div class="bigbox">
                <van-notice-bar left-icon="volume-o" text="请及时更新设备变动，若设备丢失或损坏，挂名人全责！！！" />
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                        欢迎登录
                </van-divider>
                <van-popover v-model:show="showPopover" theme="dark" :actions="actions" @select="select">
                        <template #reference>
                                <p class="titp" v-if="userbum >= 1 && userbum <= 5">数据{{ userbum }}部{{ username }}</p>
                                <p class="titp" v-if="userbum == 6">办公室{{ username }}</p>
                                <p class="titp" v-if="userbum == 7">其他部门{{ username }}</p>
                        </template>
                </van-popover>

                <van-grid>
                        <van-grid-item @click="gond"> <van-image :src="qbioc" width="30px"
                                        height="30px" /><span>所有设备</span></van-grid-item>
                        <van-grid-item @click="goqita(0)"> <van-image :src="dnioc" width="30px"
                                        height="30px" /><span>电脑</span></van-grid-item>
                        <van-grid-item @click="goqita(1)"> <van-image :src="gssmioc" width="30px"
                                        height="30px" /><span>高速扫描</span></van-grid-item>
                        <van-grid-item @click="goqita(2)"> <van-image :src="pbsmioc" width="30px"
                                        height="30px" /><span>平板扫描</span></van-grid-item>
                        <van-grid-item @click="goqita(3)"> <van-image :src="dyjioc" width="30px"
                                        height="30px" /><span>打印机</span></van-grid-item>
                        <van-grid-item @click="goqita(4)"> <van-image :src="pbsmioc" width="30px"
                                        height="30px" /><span>A3扫描</span></van-grid-item>
                        <van-grid-item @click="goqita(5)"> <van-image :src="datuioc" width="30px"
                                        height="30px" /><span>大图扫描</span></van-grid-item>
                        <van-grid-item @click="goqita(6)"> <van-image :src="jhjioc" width="30px"
                                        height="30px" /><span>交换机</span></van-grid-item>
                        <van-grid-item @click="goqita(7)"> <van-image :src="jkioc" width="30px"
                                        height="30px" /><span>监控</span></van-grid-item>
                        <van-grid-item @click="goqita(8)"> <van-image :src="kljioc" width="30px"
                                        height="30px" /><span>刻录机</span></van-grid-item>
                        <van-grid-item @click="goqita(9)"> <van-image :src="dzioc" width="30px"
                                        height="30px" /><span>电钻</span></van-grid-item>
                        <van-grid-item @click="goqita(10)"> <van-image :src="jmgioc" width="30px"
                                        height="30px" /><span>加密狗</span></van-grid-item>
                        <van-grid-item @click="goqita(11)"> <van-image :src="lrb" width="30px"
                                        height="30px" /><span>录入笔</span></van-grid-item>
                        <van-grid-item @click="goqita(12)"> <van-image :src="czioc" width="30px"
                                        height="30px" /><span>插板</span></van-grid-item>
                        <van-grid-item @click="goqita(13)"> <van-image :src="czdioc" width="30px"
                                        height="30px" /><span>裁纸刀</span></van-grid-item>
                        <van-grid-item @click="goqita(14)"> <van-image :src="qtioc" width="30px"
                                        height="30px" /><span>其他</span></van-grid-item>
                </van-grid>
                <br />
                <van-cell title="审批列表" @click="goSP" is-link />
                <br />

                <!-- 修改密码遮罩层 -->
                <van-overlay v-if="showZhuisValue" :show="showZhuisValue" @click="showZhuisValue = false">
                        <div class="wrapper" @click.stop>
                                <div class="block">
                                        <div class="deitDiv">
                                                <changepassVue></changepassVue>
                                        </div>
                                        <van-button @click="showZhuisValue = false" type="primary" block>取消</van-button>
                                </div>
                        </div>
                </van-overlay>
        </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import dnioc from '../imge/dn.png'
import qbioc from '../imge/qb.png'
import gssmioc from '../imge/smy.png'
import pbsmioc from '../imge/smy-copy.png'
import dyjioc from '../imge/dy.png'
import datuioc from '../imge/qdz.png'
import jhjioc from '../imge/fwq.png'
import jkioc from '../imge/jk.png'
import kljioc from '../imge/gq.png'
import dzioc from '../imge/dz.png'
import jmgioc from '../imge/Up.png'
import lrb from '../imge/signature.png'
import czioc from '../imge/cz.png'
import qtioc from '../imge/qt.png'
import czdioc from '../imge/czd.png'
import router from "@/router";
import { useRouter } from "vue-router";
import changepassVue from './changepass.vue'

function goqita(num) {
        router.push('/qt/qitaIndex/' + num)
}
function gond() {
        router.push('/dn')
}
function goSP() {
        router.push('/vivi')
}
function gouser() {
        router.push('/adduser')
}
//退出登录
function loginOut() {
        localStorage.removeItem("userinfo")
        router.push("/login")
}
//修改密码
const showZhuisValue = ref(false)
function changepass() {
        showZhuisValue.value = true
}
//登录用户信息
let username = ref('')
let userbum = ref('')
let zw = ref()

//读取本地存储 数据
function getuserinfo() {
        //读取本地存储的数据
        var data = JSON.parse(localStorage.getItem('userinfo'));
        if (data != null) {
                // console.log('本地存储数据', data)
                userbum.value = data.department
                username.value = data.names
                zw.value = data.position

        } else {
                router.push('/login')
        }
}
//
const showPopover = ref(false);
const actions = [
        { text: '修改密码' },
        { text: '退出登录' },
];
function select(e) {
        // console.log(e)
        if (e.text == '退出登录') {
                loginOut()
        } else if (e.text == '修改密码') {
                changepass()
        }
}
onMounted(() => {
        getuserinfo()
})
</script>

<style lang="scss" scoped>
.titp {
        width: 100vw;
        text-align: center;
}

span {
        font-size: 14px;
}

.bigbox {
        background-color: #f5f5f5;
        height: 70vh;
}
</style>